<template>
    <p>{{ num }}</p>
    <p>{{ message }}</p>
    <p>{{ message }}</p>
    <p>{{ message }}</p>
    <p>{{ getmessage() }}</p>
    <p>{{ getmessage() }}</p>
    <p>{{ getmessage() }}</p>
</template>
<script>
export default {
    data() {
        return {
            /*语法:
                computed:{
                    "计算属性名字"(){
                        return 计算结果
                    }
                }
                目的: 一个数据 依赖另一个数据, 自动更新 另一个数据是计算过来的
            */
            a: 10,
            b: 20,
            msg:'Hello vue !'
        };

    },
    computed: {
        num() {
            return this.a + this.b
        },
        /**
         * 计算属性优势:
         * 1,带有缓存效果
         * 2,计算属性对应函数执行后,会把return的值缓存起来,下次调用直接从缓存中获取
         * 3,计算属性函数必须有返回值
         */
        message() { 
            console.log("计算属性开始执行...");
            return this.msg.split('').reverse().join('')
        }
    },
    methods: {
        getmessage() {
             console.log("普通函数开始执行..."); 
            return this.msg.split('').reverse().join('')
        }
    }
}
</script>